<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>课程列表</title>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/static/css/duyi-video.css" crossorigin="anonymous">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>

<%--头部--%>
<jsp:include page="/WEB-INF/jsp/common/header.jsp"></jsp:include>
<br><br>
<%--首页内容区域--%>
<div class="container">

    <%-- 工具导航--%>
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link <c:if test="${typeId == 0}">active</c:if>" href="/courseList">全部</a>
        </li>
        <c:forEach items="${courseTypeList}" var="courseType">
            <li class="nav-item">
                <a class="nav-link <c:if test="${typeId ==courseType.id }">active</c:if>" href="/courseList/${courseType.id}">${courseType.name}</a>
            </li>
        </c:forEach>
    </ul>
    <c:forEach items="${courseTopicList.list}"  var="courseTopic" begin="0" varStatus="idx">
        <c:if test="${idx.index % 4 == 0 }">
            <div class="row row-cols-1 row-cols-md-4 mt-2">
        </c:if>
        <div class="col mb-3">
            <a href="/courseVideo/${courseTopic.id}" target="_parent">
                <div class="card select-shadow">
                    <img src="${courseTopic.iconUrl}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <p class="card-text">${courseTopic.title}</p>
                        <p class="card-text">${courseTopic.views}人学习</p>
                        <c:choose>
                            <c:when test="${courseTopic.vipFlag == 1}">
                                <span class="badge badge-pill badge-danger ">会员</span>
                            </c:when>
                            <c:otherwise>
                                <span class="badge badge-pill badge-success ">免费</span>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
            </a>
        </div>
        <c:if test="${idx.index % 4 == 3 || idx.last }">
            </div>
        </c:if>
    </c:forEach>

    <%-- 分页--%>
    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
            <c:if test="${!courseTopicList.isFirstPage}">
                <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true" target="_parent">上一页</a>
                </li>
            </c:if>
            
            <c:forEach end="${courseTopicList.pages}"  begin="1" varStatus="idx">
                <li class="page-item"><a class="page-link" href="/courseList/${typeId}?pageNum=${idx.index}" target="_parent">${idx.index}</a></li>
            </c:forEach>
            <c:if test="${!courseTopicList.isLastPage}">
                <li class="page-item">
                    <a class="page-link" href="/courseList/${typeId}?pageNum=${courseTopicList.pageNum+1}" target="_parent">下一页</a>
                </li>
            </c:if>

        </ul>
    </nav>
</div>
<br>
<br>
<%--网站的尾部--%>
<jsp:include page="/WEB-INF/jsp/common/footer.jsp"></jsp:include>
</body>
</html>